<template>
  <view class="card-package-page">
    <!-- 返回按钮和标题 -->
    <view class="header">
      <tn-button 
        backgroundColor="tn-bg-left" 
        style="color: black; margin-top: 10px; width: 35px; height: 35px; font-size: 25px;" 
        :border="false"
        @click="handleReturn"
      >
        <text class="tn-icon-left"></text>
      </tn-button>
      <view class="page-title">卡包</view>
    </view>

    <!-- 卡包内容 -->
    <view class="content">
      <view v-if="cardList.length === 0" class="empty-state">
        <text>暂无卡包信息</text>
      </view>
      <view v-else>
        <tn-list-view 
          v-for="card in cardList" 
          :key="card.id" 
          :card="true" 
          unlined="all"
        >
          <tn-list-cell>
            <view class="card-item">
              <image class="card-image" :src="card.image" mode="aspectFill"></image>
              <view class="card-info">
                <text class="card-title">{{ card.title }}</text>
                <text class="card-subtitle">{{ card.subtitle }}</text>
              </view>
            </view>
          </tn-list-cell>
        </tn-list-view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cardList: [
        {
          id: 1,
          title: "会员卡",
          subtitle: "有效期至2025年12月31日",
          image: "https://via.placeholder.com/100x100"
        },
        {
          id: 2,
          title: "优惠券",
          subtitle: "满100减20",
          image: "https://via.placeholder.com/100x100"
        },
        {
          id: 3,
          title: "积分卡",
          subtitle: "已累积1000积分",
          image: "https://via.placeholder.com/100x100"
        }
      ]
    };
  },
  methods: {
    handleReturn() {
      uni.navigateBack({ delta: 1 });
    }
  }
};
</script>

<style scoped>
.card-package-page {
  padding: 20px;
  background-color: #f5f5f5;
  height: 100%;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.page-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-left: 10px;
}

.content {
  background-color: white;
  border-radius: 10px;
  padding: 15px;
}

.empty-state {
  text-align: center;
  font-size: 16px;
  color: #666;
  margin-top: 20px;
}

.card-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.card-image {
  width: 50px;
  height: 50px;
  border-radius: 5px;
  margin-right: 10px;
}

.card-info {
  flex: 1;
}

.card-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.card-subtitle {
  font-size: 14px;
  color: #666;
}
</style>